<template >

		<div class="ui left fixed vertical inverted secondary stackable menu" style="background-color: #343a40;width: 50%;box-shadow: 0 14px 280px 10px rgba(0,0,0,.25),0 10px 1000px 1000px rgba(0,0,0,.22)!important;">
			<div class="ui container">
				<router-link to="/">
					<h3 class="ui item" style="white-space:nowrap;padding-bottom:0;">
						 <img class="ui avatar image" src="https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/touxiang.jpg">
						 <span style="font-size: 1.25rem;font-weight: 600;opacity: 0.7;"> Blog</span>
					</h3>
				</router-link>
				<el-divider><i class="el-icon-loading"></i></el-divider>
				<p style="color:#bec5c4;margin-left: 0.925rem;font-size: 1.15rem;margin-bottom: 0.525rem;">读万卷书</p>
				<router-link to="/home" class="item" :class="{'active':$route.name==='home'}">
					<i class="home icon"></i>首页
				</router-link>
				<el-dropdown trigger="click" @command="categoryRoute">
					<span class="el-dropdown-link item " :class="{'active':$route.name==='category'}" style="margin-left: 0.2675rem !important;color:rgba(255,255,255,.7);">
						<i class="idea icon" ></i> <span>分类</span> <i class="caret down icon" style="float: right !important;"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="category.name" v-for="(category,index) in categoryList" :key="index">{{ category.name }}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				
				<p style="color:#bec5c4;margin-left: 0.925rem;font-size: 1.15rem;margin-bottom: 0.525rem;margin-top: 1.7rem;">行万里路</p>
				<router-link to="/archives" class="item" :class="{'active':$route.name==='archives'}">
					<i class="clone icon"></i>日志
				</router-link>
				<router-link to="/friends" class="item" :class="{'active':$route.name==='friends'}">
					<i class="users icon"></i>资源
				</router-link>
				
				<p style="color:#bec5c4;margin-left: 0.925rem;font-size: 1.15rem;margin-bottom: 0.525rem;margin-top: 1.7rem;">点滴记录</p>
				<router-link to="/moments" class="item" :class="{'active':$route.name==='moments'}">
					<i class="comment alternate outline icon"></i>动态
				</router-link>
				<router-link to="/about" class="item" :class="{'active':$route.name==='about'}">
					<i class="info icon"></i>关于我
				</router-link>

				<!-- 				<button class="ui menu black icon button m-right-top m-mobile-show" style="width: 15%;height: 3.325rem;margin-top: 0.325rem;" @click="toggle">
					<i class="sidebar icon"></i>
				</button> -->
			</div>
		</div>


</template>

<script>
	import {
		getSearchBlogList
	} from "@/api/blog";
	import {
		mapState
	} from 'vuex'

	export default {
		name: "NavShow",
		props: {

			blogName: {
				type: String,
				required: true
			},
			categoryList: {
				type: Array,
				required: true
			},
		},
		data() {
			return {
				// show: false,
				mobileHide: true,
				queryString: '',
				queryResult: [],
				timer: null
			}
		},
		computed: {
			...mapState(['clientSize'])
		},
		watch: {
			//路由改变时，收起导航栏
			'$route.path'() {
				// this.$emit('input', false)
			}
		},
		mounted() {
			// //监听点击事件，收起导航菜单
			// document.addEventListener('click', (e) => {
			// 	//遍历冒泡
			// 	let flag = e.path.some(item => {
			// 		if (item === this.$refs.nav) return false
			// 	})
			// 	console.log("flag",flag,"show")
			// 	// console.log()
			// 	//如果导航栏是打开状态，且点击的元素不是Nav的子元素，则收起菜单
			// 	if (this.show && !flag) {
			// 		// this.isshow = true
			// 		this.$emit('update:show', false)
			// 	}
			// })
		},
		methods: {


			// toggle() {
			// 	this.isshow = !this.isshow
			// 	// this.notshow = true
			// 	// console.log("isshow",this.isshow)
			// },
			categoryRoute(name) {
				this.$router.push(`/category/${name}`)
			},

			handleSelect(item) {
				if (item.id) {
					this.$router.push(`/blog/${item.id}`)
				}
			}
		}
	}
</script>

<style>
	/* .ui.inverted.menu .item:before {
		background-color: rgba(255, 255, 255, .08) !important;
	}

	.ui.fixed.menu .container {
		width: 95% !important;
		margin-left: auto !important;
		margin-right: auto !important;


	}

	.ui.fixed.menu {
		transition: .3s ease-out;

	}

	.ui.inverted.pointing.menu.transparent {
		background: transparent !important;
	}

	.ui.inverted.pointing.menu.transparent .active.item:after {
		background: transparent !important;
		transition: .3s ease-out;
	}

	.ui.inverted.pointing.menu.transparent .active.item:hover:after {
		background: transparent !important;
	}

	.el-dropdown-link {
		outline-style: none !important;
		outline-color: unset !important;
		height: 100%;
		cursor: pointer;
	}

	.el-dropdown-menu {
		margin: 7px 0 0 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: #1b1c1d !important;
	}

	.el-dropdown-menu__item {
		padding: 0 15px !important;
		color: rgba(255, 255, 255, .9) !important;
	}

	.el-dropdown-menu__item:hover {
		background: rgba(255, 255, 255, .08) !important;
	}

	.el-popper .popper__arrow::after {
		content: none !important;
	}

	.popper__arrow {
		display: none !important;
	}

	.m-search {
		min-width: 220px;
		padding: 0 !important;

	}



	.m-search i {
		color: rgba(255, 255, 255, .9) !important;
	}

	.m-search-item {
		min-width: 350px !important;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.m-search-item li {
		line-height: normal !important;
		padding: 8px 10px !important;

	}

	.m-search-item li .title {
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 1.3625rem;
		color: rgba(0, 0, 0, 0.87);
	}

	.m-search-item li .content {
		text-overflow: ellipsis;
		font-size: 1.1375rem;
		color: rgba(0, 0, 0, .70);
	} */
</style>
